/*
 * @Description: 客户订单属性页面
 * @Version: 1.0
 * @Autor: c-jack.qian
 * @Date: 2020-10-21 17:30:52
 * @LastEditors: c-jack.qian
 * @LastEditTime: 2021-04-09 10:55:34
 */

import React, { useMemo, useRef } from 'react';
import { PageHeaderWrapper } from 'hzero-boot/lib/components/Page';
import { Button, DataSet, notification, Select, Table, TextField } from 'choerodon-ui/pro';
import { FuncType } from 'choerodon-ui/pro/lib/button/enum';
import { useDataSet } from 'hzero-front/lib/utils/hooks';
import { DataSetProps } from 'choerodon-ui/pro/lib/data-set/DataSet';
import querystring from 'querystring';
import { ColumnLock, TableColumnTooltip } from 'choerodon-ui/pro/lib/table/enum';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import intl from 'utils/intl';
import { customerOrderAttributeListDS } from '../../stores/customerOrderAttributeListDS';
import { renderSort, addEnterCallBack } from '../../utils/utilsFun';
import './indexList.less';
import CustomizeTableSearch from '@common/components/CustomizeTableSearch';
import formatterCollections from 'utils/intl/formatterCollections';

notification.config({
  duration: 3,
  placement: 'bottomRight',
});
interface propstype {
  dispatch: any;
}

const ClassPage: React.FC<propstype> = ({ dispatch }) => {
  const tableDS = useDataSet(() => new DataSet(customerOrderAttributeListDS() as DataSetProps));

  const pageRef = useRef(null);
  // 添加按回车查询事件
  addEnterCallBack(tableDS, pageRef);

  const Columns = useMemo<any>(
    () => [
      {
        header: intl.get(`dji.otc.om.view.field.serialNumber`).d('序号'),
        width: 50,
        lock: true,
        renderer: ({ record }) => renderSort(record, tableDS),
      },
      // { name: 'customerTradeToken', align: 'left', tooltip: TableColumnTooltip.always, lock: true },
      // { name: 'customerTradeName', align: 'left', tooltip: TableColumnTooltip.always },
      // { name: 'applicableDimensionCode', align: 'left', tooltip: TableColumnTooltip.always },
      // { name: 'customerTradeEnable', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'customerGroupToken', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'customerGroupName', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'customerTrulyToken', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'customerTrulyName', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'customerTrulyTransactionName', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'customerGroupEnable', align: 'left', tooltip: TableColumnTooltip.always },
      {
        header: intl.get('dji.otc.om.view.field.operationColumn').d('操作'),
        width: 150,
        lock: ColumnLock.right,
        command: ({ record }) => {
          // const tradeName = record.get('customerTradeName');
          const groupName = record.get('customerGroupName');
          const trulyName = record.get('customerTrulyName');
          const groupId = record.get('groupId');
          const groupCode = record.get('customerGroupToken');
          const trulyCode = record.get('customerTrulyToken');
          const params = {
            // tradeName,
            groupName,
            trulyName,
            // tradeCode,
            groupCode,
            trulyCode,
            groupId,
          };
          return [
            <Button
              funcType={'flat' as FuncType}
              key="edit"
              onClick={() => {
                dispatch(
                  routerRedux.push({
                    pathname: `/o2om/customer-order-attribute-list/customer-order-detail/${record.get(
                      'customerGroupToken'
                    )}`,
                    search: querystring.stringify({
                      params: encodeURIComponent(JSON.stringify({ ...params, edit: true })),
                    }),
                  })
                );
              }}
            >
              <a key="edit">{intl.get(`dji.otc.om.view.button.edit`).d('编辑')}</a>
            </Button>,
            <Button
              funcType={'flat' as FuncType}
              key="look"
              onClick={() =>
                dispatch(
                  routerRedux.push({
                    pathname: `/o2om/customer-order-attribute-list/customer-order-detail/${record.get(
                      'customerGroupToken'
                    )}`,
                    search: querystring.stringify({
                      params: encodeURIComponent(JSON.stringify({ ...params, edit: false })),
                    }),
                  })
                )
              }
            >
              <a key="look">{intl.get(`dji.otc.om.view.button.look`).d('查看')}</a>
            </Button>,
          ];
        },
      },
    ],
    []
  );

  return (
    <div ref={pageRef}>
      <PageHeaderWrapper
        title={intl.get('dji.otc.om.view.menu.customerOrderAttribute').d('客户订单属性')}
      >
        <Table
          dataSet={tableDS}
          // autoHeight={{ type: TableAutoHeightType.maxHeight, diff: 80 }}
          border
          queryFieldsLimit={3}
          columns={Columns}
          className="customerOrderAttributeList"
          queryBar={props => (
            <CustomizeTableSearch
              elements={[
                <TextField name="customerTrulyName" key="customerTrulyName" />,
                <Select name="groupId" key="groupId" searchable />,
                <TextField name="name" key="name" />,
                <Select name="state" key="state" searchable />,
                // <Cascader name="area" key="area" />,
              ]}
              // eslint-disable-next-line react/jsx-props-no-spreading
              {...props}
            />
          )}
        />
      </PageHeaderWrapper>
    </div>
  );
};

export default connect()(
  formatterCollections({
    code: 'dji.otc.om',
  })(ClassPage)
);
